<template>
  <div class="dashboard-container">
    <!-- 动态背景 -->
    <div class="bg-animation">
      <div class="bg-circle circle-1"></div>
      <div class="bg-circle circle-2"></div>
      <div class="bg-circle circle-3"></div>
    </div>
    
    <div class="dashboard-header">
      <div class="header-content">
        <div class="header-text">
          <h2 class="gradient-text">智能仪表盘</h2>
          <p class="subtitle">体育场馆预约系统 · 数据中心</p>
          <div class="status-indicator">
            <span class="status-dot"></span>
            <span class="status-text">系统运行正常</span>
          </div>
        </div>
        <div class="header-actions">
          <el-button 
            class="tech-button" 
            size="small" 
            @click="goToDebugAuth"
            v-if="showDebugButton"
          >
            <el-icon><Key /></el-icon>
            <span>系统诊断</span>
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 智能数据卡片 -->
    <div class="stats-grid">
      <!-- 活动总数 -->
      <div class="stat-card-tech activity-card" @click="handleCardClick('activities')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.activityCount }}</div>
          <div class="stat-label">活动总数</div>
          <div class="stat-trend">
            <span class="trend-text">+{{ stats.activityGrowth }}% 本月</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Trophy /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>

      <!-- 今日活动数 -->
      <div class="stat-card-tech today-activity-card" @click="handleCardClick('todayActivities')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.todayActivityCount }}</div>
          <div class="stat-label">今日活动数</div>
          <div class="stat-trend">
            <span class="trend-text pulse">实时更新</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Star /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>
      
      <div class="stat-card-tech venue-card" @click="handleCardClick('venues')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.venueCount }}</div>
          <div class="stat-label">场馆数量</div>
          <div class="stat-trend">
            <span class="trend-text">活跃场馆 {{ stats.activeVenues }}</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Location /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>
      
      <div class="stat-card-tech order-card" @click="handleCardClick('orders')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.orderCount }}</div>
          <div class="stat-label">订单总数</div>
          <div class="stat-trend">
            <span class="trend-text">+{{ stats.orderGrowth }}% 本月</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>
      
      <div class="stat-card-tech today-card" @click="handleCardClick('today')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.todayOrderCount }}</div>
          <div class="stat-label">今日订单数</div>
          <div class="stat-trend">
            <span class="trend-text pulse">实时更新</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Calendar /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>

      <!-- 今日收款 -->
      <div class="stat-card-tech today-revenue-card" @click="handleCardClick('todayRevenue')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">¥{{ (stats.todayRevenue || 0).toLocaleString() }}</div>
          <div class="stat-label">今日收款</div>
          <div class="stat-trend">
            <span class="trend-text pulse">实时更新</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Coin /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>
      
      <!-- 累计总收款 -->
      <div class="stat-card-tech revenue-card" @click="handleCardClick('revenue')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">¥{{ (stats.totalAmount || 0).toLocaleString() }}</div>
          <div class="stat-label">累计总收款</div>
          <div class="stat-trend">
            <span class="trend-text">+{{ stats.revenueGrowth }}% 本月</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>

      <!-- 预计总收款 -->
      <div class="stat-card-tech expected-revenue-card" @click="handleCardClick('expectedRevenue')">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="stat-content">
          <div class="stat-number">¥{{ (stats.expectedRevenue || 0).toLocaleString() }}</div>
          <div class="stat-label">预计总收款</div>
          <div class="stat-trend">
            <span class="trend-text">含未支付订单</span>
          </div>
        </div>
        <div class="stat-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="card-particles">
          <div class="particle"></div>
          <div class="particle"></div>
          <div class="particle"></div>
        </div>
      </div>
    </div>
    
    <!-- 智能图表区域 -->
    <div class="charts-grid">
      <div class="chart-card-tech">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="chart-header">
          <h3 class="chart-title">
            <span class="title-icon">📈</span>
            订单趋势分析
          </h3>
          <div class="chart-controls">
            <el-radio-group v-model="orderChartType" size="small" class="tech-radio-group">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-container">
          <div ref="orderTrendChart" style="width: 100%; height: 320px;"></div>
        </div>
        <div class="chart-footer">
          <span class="chart-status">实时数据</span>
        </div>
      </div>
      
      <div class="chart-card-tech">
        <div class="card-glow"></div>
        <div class="card-border"></div>
        <div class="chart-header">
          <h3 class="chart-title">
            <span class="title-icon">🏟️</span>
            场馆预约分布
          </h3>
        </div>
        <div class="chart-container">
          <div ref="venueBookingChart" style="width: 100%; height: 320px;"></div>
        </div>
        <div class="chart-footer">
          <span class="chart-status">动态更新</span>
        </div>
      </div>
    </div>
    
    <!-- 最近订单 -->
    <div class="recent-orders-tech">
      <div class="card-glow"></div>
      <div class="card-border"></div>
      <div class="card-header">
        <h3 class="section-title">
          <span class="title-icon">📋</span>
          最近订单
          <span class="title-badge">{{ recentOrders.length }}</span>
        </h3>
        <el-button class="tech-button-outline" @click="goToOrderList">
          <span>查看全部</span>
          <el-icon class="button-icon"><ArrowRight /></el-icon>
        </el-button>
      </div>
      
      <div class="table-container">
        <el-table 
          :data="recentOrders" 
          style="width: 100%" 
          v-loading="loading"
          class="tech-table"
          :header-cell-style="{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', color: 'white' }"
        >
          <el-table-column prop="order_no" label="订单号" width="180">
            <template #default="scope">
              <span class="order-no">{{ scope.row.order_no }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="venue_name" label="场馆名称">
            <template #default="scope">
              <span class="venue-name">{{ scope.row.venue_name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="user_name" label="用户" width="120">
            <template #default="scope">
              <div class="user-info">
                <div class="user-avatar">{{ (scope.row.user_name || '').charAt(0) }}</div>
                <span>{{ scope.row.user_name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="100">
            <template #default="scope">
              <span class="amount">¥{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag 
                :type="getOrderStatusType(scope.row.status)"
                class="tech-tag"
                effect="dark"
              >
                {{ getOrderStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="180">
            <template #default="scope">
              <span class="create-time">{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import * as echarts from 'echarts'
import { Location, Document, Calendar, Money, Key, ArrowRight, Trophy, Star, Coin, TrendCharts } from '@element-plus/icons-vue'

export default {
  name: 'Dashboard',
  components: {
    Location,
    Document,
    Calendar,
    Money,
    Key,
    ArrowRight,
    Trophy,
    Star,
    Coin,
    TrendCharts
  },
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const orderChartType = ref('week')
    const showDebugButton = ref(process.env.NODE_ENV === 'development') // 只在开发环境显示
    
    // 图表引用
    const orderTrendChart = ref(null)
    const venueBookingChart = ref(null)
    let orderChart = null
    let venueChart = null
    
    // 统计数据
    const stats = reactive({
      venueCount: 0,
      activeVenues: 0,
      orderCount: 0,
      todayOrderCount: 0,
      totalAmount: 0,
      activityCount: 0,
      todayActivityCount: 0,
      todayRevenue: 0,
      expectedRevenue: 0,
      activityGrowth: 0,
      orderGrowth: 0,
      revenueGrowth: 0
    })
    
    // 最近订单
    const recentOrders = ref([])
    
    // 图表数据
    const orderTrendData = ref({ categories: [], data: [] })
    const venueBookingData = ref({ pie_data: [] })
    
    // 获取统计数据
    const fetchStats = async () => {
      try {
        const response = await request.get('/v1/admin/stats')
        console.log('获取到的统计数据:', response.data)
        // 映射后端字段名到前端字段名
        const data = response.data
        stats.venueCount = data.total_venues || 0
        stats.activeVenues = data.active_venues || 0
        stats.orderCount = data.total_orders || 0
        stats.todayOrderCount = data.today_orders || 0
        stats.totalAmount = data.total_revenue || 0
        stats.activityCount = data.total_activities || 0
        stats.todayActivityCount = data.today_activities || 0
        stats.todayRevenue = data.today_revenue || 0
        stats.expectedRevenue = data.expected_revenue || 0
        stats.activityGrowth = data.activity_growth || 0
        stats.orderGrowth = data.order_growth || 0
        stats.revenueGrowth = data.revenue_growth || 0
        console.log('映射后的前端数据:', stats)
      } catch (error) {
        console.error('获取统计数据失败', error)
      }
    }
    
    // 获取最近订单
    const fetchRecentOrders = async () => {
      loading.value = true
      try {
        const response = await request.get('/v1/admin/orders/recent')
        recentOrders.value = response.data || []
      } catch (error) {
        console.error('获取最近订单失败', error)
      } finally {
        loading.value = false
      }
    }
    
    // 获取订单趋势数据
    const fetchOrderTrend = async () => {
      try {
        const response = await request.get('/v1/admin/charts/order-trend', {
          params: { period: orderChartType.value }
        })
        orderTrendData.value = response.data
        updateOrderChart()
      } catch (error) {
        console.error('获取订单趋势失败', error)
      }
    }
    
    // 获取场馆预约数据
    const fetchVenueBookings = async () => {
      try {
        const response = await request.get('/v1/admin/charts/venue-bookings')
        venueBookingData.value = response.data
        updateVenueChart()
      } catch (error) {
        console.error('获取场馆预约数据失败', error)
      }
    }
    
    // 跳转到订单列表
    const goToOrderList = () => {
      router.push('/order/list')
    }
    
    // 跳转到认证调试
    const goToDebugAuth = () => {
      router.push('/debug/auth')
    }
    
    // 获取订单状态类型
    const getOrderStatusType = (status) => {
      const statusMap = {
        'unpaid': 'warning',
        'paid': 'success',
        'completed': 'success',
        'cancelled': 'info'
      }
      return statusMap[status] || 'info'
    }
    
    // 获取订单状态文本
    const getOrderStatusText = (status) => {
      const statusMap = {
        'unpaid': '待支付',
        'paid': '已支付',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || '未知'
    }
    
    // 初始化订单趋势图表
    const initOrderChart = () => {
      if (orderTrendChart.value) {
        orderChart = echarts.init(orderTrendChart.value)
        updateOrderChart()
      }
    }
    
    // 更新订单趋势图表
    const updateOrderChart = () => {
      if (!orderChart) return
      
      const option = {
        title: {
          text: orderChartType.value === 'week' ? '最近7天订单趋势' : '最近30天订单趋势',
          textStyle: {
            fontSize: 14,
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}单'
        },
        xAxis: {
          type: 'category',
          data: orderTrendData.value.categories || [],
          axisLabel: {
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: '订单数',
          axisLabel: {
            fontSize: 12
          }
        },
        series: [{
          data: orderTrendData.value.data || [],
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            color: '#409EFF',
            width: 3
          },
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(64, 158, 255, 0.3)'
            }, {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.1)'
            }])
          }
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        }
      }
      
      orderChart.setOption(option)
    }
    
    // 初始化场馆预约图表
    const initVenueChart = () => {
      if (venueBookingChart.value) {
        venueChart = echarts.init(venueBookingChart.value)
        updateVenueChart()
      }
    }
    
    // 更新场馆预约图表
    const updateVenueChart = () => {
      if (!venueChart) return
      
      const option = {
        title: {
          text: '场馆预约情况(最近30天)',
          textStyle: {
            fontSize: 14,
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: '5%',
          left: 'center',
          textStyle: {
            fontSize: 11
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 15
        },
        series: [
          {
            name: '预约次数',
            type: 'pie',
            radius: ['35%', '65%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: true,
            label: {
              show: true,
              position: 'outside',
              fontSize: 10,
              formatter: '{b}: {d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10
            },
            data: venueBookingData.value.pie_data || []
          }
        ]
      }
      
      venueChart.setOption(option)
    }
    
    // 监听订单趋势类型变化
    watch(orderChartType, () => {
      fetchOrderTrend()
    })
    
    onMounted(() => {
      fetchStats()
      fetchRecentOrders()
      
      // 延迟初始化图表，确保DOM已渲染
      nextTick(() => {
        initOrderChart()
        initVenueChart()
        fetchOrderTrend()
        fetchVenueBookings()
      })
    })
    
    // 卡片点击处理
    const handleCardClick = (type) => {
      switch(type) {
        case 'venues':
          router.push('/venue/list')
          break
        case 'orders':
          router.push('/order/list')
          break
        case 'today':
          router.push('/order/list?filter=today')
          break
        case 'revenue':
          router.push('/payment/statistics')
          break
        case 'activities':
          router.push('/activity/list')
          break
        case 'todayActivities':
          router.push('/activity/list?filter=today')
          break
        case 'todayRevenue':
          router.push('/payment/list?filter=today')
          break
        case 'expectedRevenue':
          router.push('/payment/statistics')
          break
      }
    }

    return {
      loading,
      orderChartType,
      showDebugButton,
      stats,
      recentOrders,
      orderTrendChart,
      venueBookingChart,
      goToOrderList,
      goToDebugAuth,
      getOrderStatusType,
      getOrderStatusText,
      handleCardClick
    }
  }
}
</script>

<style lang="scss" scoped>
// 全局变量
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --dark-bg: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.95);
  --text-primary: #2c3e50;
  --text-secondary: #6c757d;
  --glow-color: rgba(102, 126, 234, 0.3);
  --border-color: rgba(0, 0, 0, 0.1);
}

.dashboard-container {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
  position: relative;
  overflow: hidden;
}

// 动态背景动画
.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;

  &.circle-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  &.circle-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
  }

  &.circle-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 50%;
    animation-delay: 4s;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(5deg); }
  66% { transform: translateY(-10px) rotate(-5deg); }
}

// 头部区域
.dashboard-header {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-text {
  .gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }

  .subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    margin: 0 0 12px 0;
    font-weight: 300;
  }
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 10px #00f2fe;
    animation: pulse 2s infinite;
  }

  .status-text {
    color: var(--text-secondary);
    font-size: 12px;
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 10px #00f2fe; }
  50% { box-shadow: 0 0 20px #00f2fe, 0 0 30px #00f2fe; }
  100% { box-shadow: 0 0 10px #00f2fe; }
}

// 科技感按钮
.tech-button {
  background: var(--primary-gradient);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    
    &::before {
      left: 100%;
    }
  }
}

.tech-button-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);

  &:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
  }

  .button-icon {
    margin-left: 4px;
    transition: transform 0.3s ease;
  }

  &:hover .button-icon {
    transform: translateX(4px);
  }
}

// 统计卡片网格
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.stat-card-tech {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #667eea;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    
    .card-glow {
      opacity: 1;
    }
    
    .stat-icon {
      transform: scale(1.1) rotate(5deg);
    }
    
    .card-particles .particle {
      opacity: 1;
    }
  }
}

.card-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--primary-gradient);
  border-radius: 16px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}

.card-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card-tech:hover .card-border {
  opacity: 1;
}

.stat-content {
  position: relative;
  z-index: 2;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 400;
}

.stat-trend {
  .trend-text {
    font-size: 12px;
    color: #00f2fe;
    padding: 2px 8px;
    background: rgba(0, 242, 254, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.3);

    &.pulse {
      animation: pulse 2s infinite;
    }
  }
}

.stat-icon {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 48px;
  color: rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

// 粒子效果
.card-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #667eea;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;

  &:nth-child(1) {
    top: 20%;
    left: 20%;
    animation: particle-float 3s infinite ease-in-out;
  }

  &:nth-child(2) {
    top: 60%;
    right: 30%;
    animation: particle-float 3s infinite ease-in-out 1s;
  }

  &:nth-child(3) {
    bottom: 30%;
    left: 60%;
    animation: particle-float 3s infinite ease-in-out 2s;
  }
}

@keyframes particle-float {
  0%, 100% { transform: translateY(0px); opacity: 0; }
  50% { transform: translateY(-10px); opacity: 1; }
}

// 图表区域
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.chart-card-tech {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    border-color: #667eea;
    
    .card-glow {
      opacity: 0.5;
    }
  }
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;

  .title-icon {
    font-size: 20px;
  }
}

.chart-controls {
  .tech-radio-group {
    :deep(.el-radio-button__inner) {
      background: transparent;
      border-color: var(--border-color);
      color: var(--text-secondary);
      transition: all 0.3s ease;

      &:hover {
        color: var(--text-primary);
        border-color: #667eea;
      }
    }

    :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
      background: var(--primary-gradient);
      border-color: #667eea;
      color: white;
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
  }
}

.chart-container {
  position: relative;
  z-index: 2;
}

.chart-footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  
  .chart-status {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 12px;
    background: rgba(0, 242, 254, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.3);
  }
}

// 最近订单区域
.recent-orders-tech {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;

  .title-icon {
    font-size: 22px;
  }

  .title-badge {
    font-size: 12px;
    background: var(--primary-gradient);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
  }
}

// 表格样式
.table-container {
  :deep(.tech-table) {
    background: transparent;
    
    .el-table__header {
      background: transparent;
      
      th {
        background: var(--primary-gradient) !important;
        color: white !important;
        border: none;
        font-weight: 600;
      }
    }
    
    .el-table__body {
      tr {
        background: transparent;
        border: none;
        transition: all 0.3s ease;
        
        &:hover {
          background: rgba(102, 126, 234, 0.1) !important;
          transform: scale(1.01);
        }
        
        td {
          border: none;
          border-bottom: 1px solid var(--border-color);
          color: var(--text-primary);
        }
      }
    }
  }
}

.order-no {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #00f2fe;
}

.venue-name {
  color: var(--text-primary);
  font-weight: 500;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
  }
}

.amount {
  font-weight: 600;
  color: #43e97b;
}

.create-time {
  color: var(--text-secondary);
  font-size: 12px;
}

.tech-tag {
  font-weight: 500;
  border-radius: 12px;
  border: none;
}

// 新增卡片特定样式
.activity-card {
  .card-glow {
    background: radial-gradient(circle, rgba(255, 107, 107, 0.3) 0%, transparent 70%);
  }
  
  &:hover {
    border-color: #ff6b6b;
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.3);
  }
}

.today-activity-card {
  .card-glow {
    background: radial-gradient(circle, rgba(255, 206, 84, 0.3) 0%, transparent 70%);
  }
  
  &:hover {
    border-color: #ffce54;
    box-shadow: 0 8px 24px rgba(255, 206, 84, 0.3);
  }
}

.today-revenue-card {
  .card-glow {
    background: radial-gradient(circle, rgba(67, 233, 123, 0.3) 0%, transparent 70%);
  }
  
  &:hover {
    border-color: #43e97b;
    box-shadow: 0 8px 24px rgba(67, 233, 123, 0.3);
  }
}

.expected-revenue-card {
  .card-glow {
    background: radial-gradient(circle, rgba(162, 155, 254, 0.3) 0%, transparent 70%);
  }
  
  &:hover {
    border-color: #a29bfe;
    box-shadow: 0 8px 24px rgba(162, 155, 254, 0.3);
  }
}

// 优化网格布局以适应更多卡片
.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

// 响应式设计
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }
  
  .stat-card-tech {
    padding: 20px;
  }
}
</style> 